<template>
  <view class="login">
    <!-- 标语区域 -->
    <view class="slogan">
      <text>您好</text>
      <text>加入享+，让生活更轻松</text>
    </view>

    <!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
    <u--form labelPosition="left" ref="uForm" :model="form" :rules="rules">
      <u-form-item prop="mobile" borderBottom ref="item1">
        <u--input v-model="form.mobile" placeholder-style="color:#979797" placeholder="请输入手机号" border="none">
        </u--input>
        <block slot="right">
          <u-count-down @finish="onFinish" v-if="isShowCountDown" :time="6 * 1000" format="ss s">
          </u-count-down>
          <view v-else @click="getCode" class="code-btn">获取验证码</view>
        </block>
      </u-form-item>
      <u-form-item prop="code" borderBottom ref="item1">
        <u--input maxlength="6" v-model="form.code" placeholder-style="color:#979797" placeholder="请输入6位验证码"
          border="none">
        </u--input>
      </u-form-item>
    </u--form>

    <view class="tip">未注册手机号经验证后将自动注册</view>

    <life-button @click="onLogin" bgColor="#5591AF" color="#fff" icon="../../static/icon/login.png">
      登录
    </life-button>

    <!-- 模拟短信提示 -->
    <u-notify @click.native="copyCode" ref="uNotify"></u-notify>
  </view>
</template>

<script>
  import {
    sendCode,
    login
  } from '@/api/login.js'
  export default {
    data() {
      return {
        form: {
          mobile: '18900000000',
          code: ''
        },
        code: '',
        isShowCountDown: false,
        rules: {
          mobile: [{
              required: true,
              message: '请输入手机号',
              trigger: ['change', 'blur'],
            },
            {
              pattern: /^((\+|00)86)?1((3[\d])|(4[5,6,7,9])|(5[0-3,5-9])|(6[5-7])|(7[0-8])|(8[\d])|(9[1,8,9]))\d{8}$/,
              message: '手机号码格式不正确',
              trigger: ['change', 'blur'],
            }
          ],
          code: [{
            required: true,
            message: '请输入验证码',
            trigger: ['change', 'blur'],
          }, {
            pattern: /^\d{6}$/,
            message: '验证码格式不正确',
            trigger: ['change', 'blur'],
          }]
        }


      }
    },
    methods: {
      getCode() {
        // 校验手机号
        this.$refs.uForm.validateField('mobile', async (errRes) => {
          if (errRes.length) return
          // 手机号合法，发请求
          const res = await sendCode(this.form.mobile)
          // message
          const message = `【享+生活】验证码：${res.data.code}.您正在使用短信验证码功能，验证码提供他人可能导致账号被盗，请勿转发或泄漏。`
          this.code = res.data.code
          // 短信提示
          this.$refs.uNotify.show({
            top: 10,
            type: 'success',
            message: message,
            duration: 1000 * 6,
            fontSize: 14
          })
          // 震动
          uni.vibrateLong()
          // 显示倒计时
          this.isShowCountDown = true
        })
      },
      // 复制
      copyCode() {
        uni.setClipboardData({
          data: this.code
        })
      },
      // 倒计时结束
      onFinish() {
        this.isShowCountDown = false
      },
      // 点击登录
      async onLogin() {
        try {
          await this.$refs.uForm.validate()
          const res = await login(this.form)
          // console.log(res.data)
          this.$store.commit('user/setUserToken', res.data)
          uni.setStorageSync('userToken', res.data)
          uni.switchTab({
            url: "/pages/my/my"
          })
        } catch (err) {
          console.log(err)
        }
      }
    },
    // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
    onReady() {
      this.$refs.uForm.setRules(this.rules);
    }
  }
</script>

<style lang="scss" scoped>
  .login {
    padding: 0 30rpx;

    .slogan {
      padding: 50rpx 0;
      display: flex;
      flex-direction: column;

      text:nth-child(1) {
        color: #333333;
        font-weight: medium;
        font-size: 48rpx;
        line-height: 72rpx;
        letter-spacing: 0rpx;
        text-align: left;
      }

      text:nth-child(2) {
        color: #333333;
        font-weight: regular;
        font-size: 30rpx;
        line-height: 1.5;
        letter-spacing: 0rpx;
      }
    }

    ::v-deep .u-form {
      margin-top: 22rpx;

      .code-btn {
        color: #5591AF;
        font-size: 28rpx;
      }

      .u-form-item {
        .u-form-item__body {
          height: 103rpx;
          padding: 0;
        }

        .u-form-item__body__right__message {
          margin-left: 0 !important;
          // margin-top: -30rpx;
        }
      }
    }



    .tip {
      color: #C3C3C5;
      font-size: 26rpx;
      line-height: 40rpx;
      margin-top: 30rpx;
    }
  }
</style>
